<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_order_flow')" />
    <el-steps :active="activeStatus">
      <el-step :title="$tt('label_order_create')" :description="$dateFormat(form.gmtCreate)"></el-step>
      <el-step :title="$tt('label_order_submit')" :description="$dateFormat(form.submitDate)"></el-step>
      <el-step :title="$tt('label_warehouse_doWith')" :description="$dateFormat(form.submitDate)"></el-step>
      <el-step :title="$tt('label_order_outbound')" :description="$dateFormat(form.outDate)"></el-step>
      <el-step :title="$tt('label_order_finish')" :description="$dateFormat(form.completeDate)"></el-step>
    </el-steps>

    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc v-bind="baseOption" :data="form" :attrs="$defaultDetailDescAttrs" />


    <ex_header_spiler :title="$tt('label_consignee_info')" />
    <ex_super_desc v-bind="consigneeOption" :data="form" :attrs="$defaultDetailDescAttrs" />
    <ex_header_spiler :title="$tt('label_sku_specification')" />
    <ex_super_table v-bind="skuOption" :data="form.detailList" size="default" height="400" />

    <ex_header_spiler :title="$tt('label_operate_record')" />
    <ex_super_table v-bind="recordOption" :data="form.operationLogList? form.operationLogList : []" size="default" height="300" />
    <ex_header_spiler :title="$tt('label_receivable_accounts_details')" />
    <ex_super_table v-bind="billOption" :data="form.omsOutboundBillDetailVOList ? form.omsOutboundBillDetailVOList : []"
      size="default" height="300" />
  </div>
</template>
<script>
import router_params from '@/mixin/router_params';


export default {

  title: "title_outbound_order_detail",
  mixins: [router_params],
  components: {},


  data() {
    return {
      loading: false,

      form: {},
      baseOption: {
        model: [
          { key: 'orderNo', label: 'label_order_code', },
          { key: 'warehouseName', label: 'label_outbound_warehouse', formatter: (r, c, v) => this.$formatNameCode(v, r.warehouseCode) },
          { key: 'outType', label: 'label_outbound_type', formatter: (r, c, v) => this.$enumShow(v, "OmsOutboundOrderTypeEnum") },
          { key: 'bizType', label: 'label_business_type', formatter: (r, c, v) => this.$enumShow(v, "BizTypeEnum") },

          { key: 'cutoffDate', label: 'label_cutoff_date', if: (r, c, v) => v, formatter: (r, c, v) => this.$dateFormat(v) },
          { key: 'cutoffReason', label: 'label_cutoff_reason', if: (r, c, v) => v, },

          { key: 'logisticsName', label: 'label_logistics', formatter: (r, c, v) => this.$formatNameCode(v, r.logisticsCode) },


          { key: 'trackNumber', label: 'label_track_code', render: (h, scope) => this.$renderText(h, scope) },

          { key: 'insuranceService', label: 'label_insurance_server', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'insuranceAmount', label: 'label_insurance_amount', if: (r, c, v) => r.insuranceService == 'Y', },
          { key: 'insurancePolicyNos', label: 'label_insurance_order_code', if: (r, c, v) => r.insuranceService == 'Y', },

          { key: 'signReceipt', label: 'label_sign_server', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },

          { key: 'ullageFlag', label: 'label_is_allow_ullage_outbound', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          {
            key: 'ullageOutboundFlag', label: 'label_is_been_ullage_outbound', if: (r, c, v) => r.ullageFlag == 'Y',
            formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum")
          },


          { key: 'ecPlatform', label: 'label_ec_platform', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'ecPlatformOrderNo', label: 'label_ec_platform_code', render: (h, scope) => this.$renderText(h, scope) },

          { key: 'exceptionMsg', label: 'label_exception_info', if: (r, c, v) => r.outStatus == 'GET_TRACK_NUMBER_FAIL' },
          { key: 'retriesCount', label: 'label_retry_count', if: (r, c, v) => r.outStatus == 'GET_TRACK_NUMBER_FAIL' },

          { key: 'additionalService', label: 'label_value_add_service', render: (h, scope) => this.$renderText(h, scope) },

          { key: 'totalWeight', label: 'label_expected_total_weight', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Weight(data[item.key])), },
          { key: 'totalVolume', label: 'label_expected_total_volume', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Volume(data[item.key])), },
          { key: 'actualTotalWeight', label: 'label_actual_total_weight', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Weight(data[item.key])), },
          { key: 'actualTotalVolume', label: 'label_actual_total_volume', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Volume(data[item.key])), },


          { key: 'outboundMode', label: 'label_outbound_method', formatter: (r, c, v) => this.$enumShow(v, "OutboundOrderModeEnum") },

          { key: 'taxNoType', label: 'label_tax_code_type',if:()=>this.$loginUser.ifElse澳越, render: (h, { data, item }) => this.$renderText(h, this.$enumShow(data[item.key], 'TaxNoTypeEnum')) },
          { key: 'taxNo', label: 'label_tax_code',if:()=>this.$loginUser.ifElse澳越, render: (h, { data, item }) => this.$renderText(h, data[item.key]) },
          { key: 'interceptFlag', label: 'label_is_doing_intercept', span: 1,formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'interceptStatus', label: 'label_intercept_status', span: 1,formatter: (r, c, v) => this.$enumShow(v, "OrderInterceptStatusEnum") },
          { key: 'interceptTime', label: 'label_intercept_order_time', span: 1,    formatter: (r, c, v) => this.$dateFormat(v) },
          { key: 'interceptCause', label: 'label_intercept_reason', span: 1,  },
          { key: 'twicePutawayFlag', label: 'label_is_second_put', span: 1,formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },


          { key: 'remark', label: 'label_remark', span: 1, },

          {
            key: 'deliveryReceiptFilePath', label: 'label_handover_order', if: (r, c, v) => v,
            render: (h, { data }) => {
              const item = data
              const files = [{ filePath: item.deliveryReceiptFilePath, fileName: item.deliveryReceiptFileName, }]
              return (<ex_super_upload value={files} disabled type="file" />)
            }
          },
        ],
      },
      skuOption: {
        model: [
          {
            key: "skuBarcode", label: "label_sku_code", 'show-overflow-tooltip': true,
            propertyFilter: true, sortable: true,
          },

          {
            key: 'skuOnlyCode', label: 'label_sku_only_code', 'show-overflow-tooltip': true,
            propertyFilter: true, sortable: true,
          },
          {
            key: 'skuNameCn', label: 'label_sku_name', attrs: {
              formatter: (r, c, v) => this.$formatNameCode(v, r.skuNameEn),
              'show-overflow-tooltip': true,
            }
          },
          // { key: 'stockCount', label: 'label_stock_count', 'width': 100, },
          {
            key: 'skuCount', label: 'label_expected_outbound_count', 'width': 130,
            sortable: true,
          },
          { key: 'actualOutCount', label: 'label_actual_outbound_count', 'width': 130, sortable: true, },
          {
            key: 'skuPackage', label: 'label_carton_spec', if: () => this.TOB,
            sortable: true,
            formatter: (r, c, v) => `${v}/` + this.$tt('label_box'),
          },
          {
            key: 'declaredValue', label: 'label_declared_value',
            sortable: true,
            formatter: (r, c, v) => this.$formatNameCode(v, r.currencyCode)
          },
        ],
      },
      consigneeOption: {
        model: [

          { key: 'ecPlatformWarehouse', label: 'label_ec_platform_warehouse', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope)},
          { key: 'ecPlatformWarehouseAddr', label: 'label_ec_platform_warehouse_address', if: () => this.EC_WAREHOUSE_DELIVERY, span: 3, render: (h, scope) => this.$renderText(h, scope)},
          {
            key: 'requireDeliveryTime', label: 'label_require_delivery_time', if: () => this.EC_WAREHOUSE_DELIVERY,
            formatter: (r, c, v) => this.$dateFormat(v)
          },
          { key: 'country', label: 'label_consignee_country', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope)},
          { key: 'consignee', label: 'label_consignee_person_name', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope)},


          { key: 'transferLogisticsName', label: 'label_transship_logistics_name', if: () => this.LOGISTICS_TRANSFER,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'transferConsigneePhone', label: 'label_transship_receive_contact', if: () => this.LOGISTICS_TRANSFER, render: (h, scope) => this.$renderText(h, scope)},
          { key: 'transferShippingAddress', label: 'label_transship_receive_address', if: () => this.LOGISTICS_TRANSFER, span: 2,render: (h, scope) => this.$renderText(h, scope) },

          { key: 'takeDeliveryPerson', label: 'label_take_good_user_name', if: () => this.TAKE_THEIR,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'takeDeliveryPersonPhone', label: 'label_take_good_contact', if: () => this.TAKE_THEIR,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'takeDeliveryTime', label: 'label_expected_take_good_date', if: () => this.TAKE_THEIR, formatter: (r, c, v) => this.$dateFormat(v) },


          { key: 'country', label: 'label_consignee_country', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'consignee', label: 'label_consignee_person_name', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'consigneePhone', label: 'label_consignee_person_phone', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'province', label: 'label_consignee_province', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'city', label: 'label_consignee_city', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'email', label: 'label_consignee_person_email', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'postcode', label: 'label_consignee_postcode', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'houseNumber', label: 'label_consignee_house_number', if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'companyName', label: 'label_consignee_company', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope)},
          { key: 'address', label: 'label_consignee_address', span: 3, if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
          { key: 'reserveAddress', label: 'label_consignee_address_reserve', span: 4, if: () => this.HOME_DELIVERY,render: (h, scope) => this.$renderText(h, scope) },
        ],
      },
      recordOption: {
        attrs: { stripe: true, },
        defaultColAttr: {
          align: 'left',
        },
        model: [
          {
            key: 'orderStatus', label: 'label_operate_process', 'min-width': 150, flxed: 'left',
            render: (h, { row, column }) => this.$enumShow(row[column.property],"OmsOutboundOrderStatusEnum"),
          },
          {
            key: 'operationUser', label: 'label_operate_user', 'min-width': 140,
            render: (h, { row, column }) => this.$renderText(h,{ row, column }),
          },
          {
            key: 'gmtCreate', label: 'label_operate_time', 'width': 150,
            render: (h, { row, column }) => this.$renderText(h, this.$dateFormat(row[column.property])),
          },

        ],
      },
      billOption: {
        attrs: { stripe: true, },
        defaultColAttr: {
          align: 'left',
        },
        model: [
          {
            key: 'productName', label: 'label_logistics', 'min-width': 200,
            render: (h, { row, column }) => this.$renderText(h, this.$formatNameCode(row[column.property], row.productCode)),
          },
          { key: 'serviceName', label: 'label_pms_service_cost', 'min-width': 160, render: (h, { row, column }) => this.$renderText(h, row[column.property]), },

          { key: 'price', label: 'label_calculate_unit_price', 'width': 140, render: (h, { row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)), },
          { key: 'calNums', label: 'label_calculate_count', 'width': 120, render: (h, { row, column }) => this.$renderText(h, row[column.property]), },
          { key: 'serviceAmount', label: 'label_money', 'width': 140, render: (h, { row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)), },
          { key: 'status', label: 'label_settlement_situation', 'width': 150, render: (h, { row, column }) => this.$renderText(h, this.$enumShow(row[column.property], 'FmsBillDetailStatus')), },

        ]
      },
    };
  },

  computed: {
    HOME_DELIVERY() {
      return !this.form.outboundMode || this.form.outboundMode == "HOME_DELIVERY"
    },
    TAKE_THEIR() {
      return this.form.outboundMode == "TAKE_THEIR"
    },
    EC_WAREHOUSE_DELIVERY() {
      return this.form.outboundMode == "EC_WAREHOUSE_DELIVERY"
    },
    LOGISTICS_TRANSFER() {
      return this.form.outboundMode == "LOGISTICS_TRANSFER"
    },
    TOB() {
      return this.form.bizType == 'TOB'
    },
    activeStatus() {
      if (this.form.outStatus == 'COMPLETED') {
        return 5
      } else if (this.form.outStatus == 'COMPLETE_OUTBOUND') {
        return 4
      } else if (this.form.outStatus == 'WAREHOUSE_PROCESSING') {
        return 3
      } else if (this.form.submitDate) {
        return 2
      }
      return 1
    }
  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: "/oms-api/client/OutboundOrderClientRpc/getDetailById4Edit.json",
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.loading = false
            this.form = Object.assign({}, res.data)
            this.fixTabLabel()

          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      if (!!this.form.orderNo) {
        this.$emit("tagModifyLabel", { _key: 'label_name_code', name: this.$tt('title_outbound_order_detail'), code: this.form.orderNo || "" })

      } else {
        this.$emit("tagModifyLabel", "title_outbound_order_detail")
      }
    },
  }
};

</script>
<style></style>
